<template>
    <el-menu
        :default-active="activeIndex"
        class="menu"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
    >
        <el-menu-item index="0">
            <img style="width: 200px" src="/centerIcons/centerLogo.png" alt="Element logo" />
        </el-menu-item>
        <div class="flex-grow">
            <text>“你会遇见比我更有趣的人，然后在黄昏晚霞消散时忘记我。”</text>
        </div>
        <div class="menu-right">
            <img class="tool" src="/centerIcons/more.png" />
            <img class="avatar" :src="`${BaseUrl}${$store.state.userInfo.avatar}`" />
        </div>
    </el-menu>
</template>

<script setup>
    import router from '@/router';
    import { ref } from 'vue';
    import { BaseUrl } from '../../../server/userApi';

    const activeIndex = ref('1');
    const handleSelect = (key, keyPath) => {
        router.push('/');
        console.log(key, keyPath);
    };
</script>

<style lang="scss" scoped>
    .menu {
        margin: 12px 0;

        .flex-grow {
            flex-grow: 1;

            text {
                font-size: 14px;
                color: #999;
                line-height: 40px;
            }
        }
        .menu-right {
            display: flex;
            align-items: center;
            margin-right: 20px;
            padding-bottom: 20px;
            .tool {
                width: 30px;
                height: 30px;
                margin-right: 20px;
                cursor: pointer;
            }
            .avatar {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                cursor: pointer;
            }
        }
    }
</style>
